<template>
    <div class="app-container" id='Brand'>
      <div class="filter-container" style="float: right;">
        <!-- <el-input v-model="listQuery.id" clearable class="filter-item" style="width: 200px;" placeholder="请输入品牌商ID">
        </el-input> -->
        <el-input v-model="listQuery.question" clearable class="filter-item" style="width: 200px;" placeholder="请输入问题">
        </el-input>
        <el-button type="primary" class="filter-item" icon="el-icon-search" @click="handleFilter">查询</el-button>
        <el-button type="primary" class="filter-item" icon="el-icon-edit" @click="handleCreate">新增</el-button>
      </div>
      <el-table :data="tableData" style="width: 100%" border fit highlight-current-row>
        <el-table-column prop="id" align="center" label="问题ID" sortable width="120">
        </el-table-column>
        <el-table-column prop="question" align="center" label="问题" width="180">
        </el-table-column>
        <el-table-column prop="answer" align="center" label="问题回复">
        </el-table-column>
        <el-table-column align="center" fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button @click="handleUpdate(scope.row)" type="primary" size="small">编辑</el-button>
            <el-button @click="handleDelete(scope.row)" type="danger" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
        @pagination="getList" />
      <el-dialog title="dialogStatus" :visible.sync="dialogFromVisible">
          <el-form ref="dataForm" :rules="rules" :model="dataForm" label-width="100px" size="mini" style="width: 400px;margin-left: 20px;">
              <el-form-item label="问题" prop="question">
                <el-input v-model="dataForm.question" placeholder="请输入问题"></el-input>
              </el-form-item>
              <el-form-item label="回复" prop="answer">
                  <el-input v-model="dataForm.answer" :row="8" type="textarea" placeholder="请输入回复"></el-input>
              </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFromVisible = false">取消</el-button>
              <el-button v-if="dialogStatus==='新增'" type="primary" @click="createData">确定</el-button>
              <el-button v-else type="primary" @click="updateData">确定</el-button>
          </div>
      </el-dialog>
      
    </div>
  </template>
  <script>
    import Pagination from '@/components/Pagination'
    import {listIssue,createIssue,updateIssue,deleteIssue} from '@/api/malls/problem'
    export default {
      name: 'Problem',
      components: {
        Pagination
      },
      data() {
        return {
          //查询数据
          listQuery: {
            page: 1,
            limit: 10,
            id: '',
            name: '',
          },
          //总条数
          total: 0,
          //表单数据
          tableData: [],
          //添加或修改模态框
          dialogFromVisible: false,
          dialogStatus:'新增',
          //新增表单数据
          dataForm: {
             id: '',
             name: '',
             desc: '',
             floorPrice: '',
             picUrl: ''
          },
          //校验规则
          rules:{
            question:[{required:true,message:'问题不能为空',trigger:'blur'}],
            answer:[{required:true,message:'回复不能为空',trigger:'blur'}]
          },
        }
      },
      created() {
        // 数据初始化
        this.getList();
      },
      methods: {
        //查询列表
        handleFilter() {
          this.listQuery.page = 1;
          this.getList();
        },
        //获取列表数据接口
        getList() {
          listIssue(this.listQuery).then(res => {
              console.log(res);
              this.tableData = [];
              this.tableData = res.data.data.list;
              this.total = res.data.data.total;
          })
          
        },
        //重置表单数据
        resetForm(){
          this.dataForm={
            id:'',
            name:'',
            desc:'',
            footPrice:'',
            picUrl:''
          }
        },
        //打开新增模态框
        handleCreate() {
          this.resetForm();
          this.dialogStatus='新增',
          this.dialogFromVisible= true;
        },
        
        //确定新增
        createData(){
          this.$refs['dataForm'].validate(valid=>{
            if(valid){
            createIssue(this.dataForm).then(res=>{
            this.dialogFromVisible=false;
            this.getList();
            this.$notify.success({
              title:'成功',
              message:'新增成功'
            });
          })
            }
          })
          
        },
        //打开修改模态框
        handleUpdate(row){
          this.dataForm=Object.assign({},row);
          this.dialogStatus='修改';
            this.dialogFromVisible=true;
        },
        //确定修改
        updateData(){
          this.$refs['dataForm'].validate(valid=>{
            if(valid){
              updateIssue(this.dataForm).then(()=>{
                this.dialogFromVisible=false;
                this.getList();
                this.$notity.success({
                  title:'成功',
                  message:'修改成功'
                })
              })
            }
          })
        },
        //删除
        handleDelete(row){
          this.$confirm('此操作将删除该品牌商，是否继续？','提示',{
            confirmButtonText:'确定',
            concelButtonText:'取消',
            type:'warning'
          }).then(()=>{
            deleteIssue(row).then(res=>{
              this.getList();
                this.$notity.success({
                  title:'成功',
                  message:'删除成功'
                })
            })
          }).catch(()=>{
            this.$message({
              type:'info',
              message:'已取消删除'
            })
          })
        },
        //图片上传成功后执行的方法
        handleAvatarSuccess(res, file) {
        this.dataForm.picUrl = URL.createObjectURL(file.raw);
      },
      //图片上传成功前执行的方法
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;
  
        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
        },
        
      }
    }
  
  </script>
  <style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  </style>
  <style scoped>
  </style>
  